<template>
  <div id="card">
    <el-card v-for="(exam,index1) in radioOptions" :key="(exam.index)">
      <div class="title">{{exam.topic}}</div>
      <div>
        <el-radio-group
          v-model="radio[index1]"
          text-color="white"
          :fill="color[index1]"
        >
          <div class="selection">
            <el-radio-button label="A">{{exam.optionA}}</el-radio-button>
          </div>
          <div class="selection">
            <el-radio-button label="B">{{exam.optionB}}</el-radio-button>
          </div>
          <div class="selection">
            <el-radio-button label="C">{{exam.optionC}}</el-radio-button>
          </div>
          <div class="selection">
            <el-radio-button label="D">{{exam.optionD}}</el-radio-button>
          </div>
        </el-radio-group>
      </div>
    </el-card>
    <submitBtn></submitBtn>
  </div>
</template>
<script>
import { queryByExamId, checkAnswer } from "@/api/examination_detail";
import submitBtn from "@/components/submitBtn"
export default {
  components:{ 
    submitBtn
  },
  data() {
    return {
      radioOptions: [],
      radio: [],
      result: {},
      color:[]
    };
  },

  methods: {
    submit() {
      var userAnswer = "";
      new Promise((resolve) => {
        userAnswer = new Map();
        for (var i in this.radio) {
          userAnswer[this.radioOptions[i].id]=this.radio[i];
        }
        resolve();
      }).then(() => {
        console.log(userAnswer)
        checkAnswer(this.$route.query.id, userAnswer).then((res) => {
          this.result = res.data.resultList;
          for(var i in this.result){ 
            if(this.result[i]==1){ 
              this.color[i]="green"
            }else{
              this.color[i]="red"
            }
          }
          this.$forceUpdate();
        });
      });

      
      console.log(this.color);
    },
    getTopic() {
      queryByExamId(this.$route.query.id).then((res) => {
        this.radioOptions = res.data.radioOptions;
      });
    },
  },
  created() {
    this.result = "";
    this.color=[];
    this.getTopic();
  },
};
</script>
<style>
#card .el-card {
  text-align: left;
  margin: 20px;
}
.selection {
  margin: 20px;
}

</style>